<template lang="html">
    <div class="">
        <logo></logo>
        <h2>register</h2>
        <div class="cell-wrapper">
            <mt-fiel label="用户名" placeholder="请输入用户名" v-model="user"></mt-fiel>
            <mt-fiel label="密码" placeholder="请输入密码" type="password" v-model="pwd"></mt-fiel>
            <mt-fiel label="确认密码" placeholder="请确认密码" type="password" v-model="repeatPwd"></mt-fiel>
        </div>
        <div class="page-wrapper">
            <mt-radio
                  title="select you id"
                  v-model="value"
                  :options="options">
                </mt-radio>
        </div>
        <div class="page-msgbox-wrapper">
            <!-- <mt-button @click.native="login" type="primary" size="large"> login</mt-button> -->

            <mt-button @click.native="register" type="primary" size="large"> register</mt-button>
        </div>
    </div>
</template>

<script>
import Logo from '@/components/logo/Logo'
import {
	Field,
	Button,
	Radio
} from 'mint-ui';
// import {
// 	mapState
// } from 'vuex'

export default {
	data() {
		return {
			user: '',
			pwd: '',
			repeatPwd: '',
			value: 'A',
			options: [{
					label: '天才',
					value: 'A'
				},
				{
					label: '人才',
					value: 'B'
				}
			]


		}
	},
	components: {
		Logo,
		'mtFiel': Field,
		'mtButton': Button,
		'mtRadio': Radio
	},
	methods: {
		register() {
			this.$store.dispatch('register', {
				user: this.user,
				pwd: this.pwd,
				type: this.value
			}).then((res) => {
				console.log(res)
			})

		}

	}
	// computed: {
	// 	...mapState({
	// 		// 箭头函数可使代码更简练
	// 		isAuth: state => state.isAuth,
	// 		// // 传字符串参数 'count' 等同于 `state => state.count`
	// 		// countAlias: 'count',
	// 		//
	// 		// // 为了能够使用 `this` 获取局部状态，必须使用常规函数
	// 		// countPlusLocalState(state) {
	// 		// 	return state.count + this.localCount
	// 		// }
	// 	})
	// }
}
</script>

<style lang="css" scoped="true">
.page-wrapper{
    margin-bottom: 10px;
}
    .page-msgbox-wrapper{
        padding: 0 20px;
    }
</style>
